<template>
  <div id="login">
    <div class="loginBox">
      <div class="leftBox">
        <img src="http://47.102.159.133:8888/img/login.481f3a1c.png" alt="">
      </div>
      <div class="rightBox">
        <h2>后台管理</h2>
        <el-input v-model="info.username" placeholder="账号"></el-input>
        <el-input v-model="info.password" type="password" placeholder="密码"></el-input>
        <el-button type="primary" @click="loginFn">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import demo from '@/api/login';
export default {
  name: "LoginView",
  data() {
    return {
      name: "wwteam",
      info: {
        username: 'admin',
        password: '123456'
      }
    };
  },
  methods: {
    async loginFn() {
      const { token, username } = await demo.postLogin(this.info);
      //这里将获取的token存到localStorage中
      localStorage.setItem('token', token);
      localStorage.setItem('username', username);
      this.$message({
        message: `欢迎您${username}`,
        type: 'success'
      });
      //登陆成功后跳转到welcome页
      this.$router.push({ name: 'welcome' });

    },
  },
};
</script>

<style lang="scss">
#login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('http://47.102.159.133:8888/img/bg-login.13f45daf.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .loginBox {
    display: flex;
    width: 50vw;
    height: 50vh;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: -9px 0 10px -10px #000;

    .leftBox {
      width: 60%;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 90%;
      }
    }

    .rightBox {
      width: 40%;
      padding: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .el-input {
        margin: 20px 0;
      }

      .el-button {
        width: 100%;
      }
    }
  }
}
</style>